<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>Insert title here</title>
        <script type="text/javascript" src="../jqtool/jquery.tools.min.js">
        </script>
        <style type="text/css">
            body {
                padding: 50px 80px;
                font-family: "Lucida Grande", "bitstream vera sans", "trebuchet ms", sans-serif, verdana;
            }
            
            /* get rid of those system borders being generated for A tags */
            a:active {
                outline: none;
            }
            
            a:focus {
                -moz-outline-style: none;
            }
        </style>
        <style>
            #facebox {
                /* overlay is hidden before loading */
                display: none;
                /* standard decorations */
                width: 400px;
                border: 10px solid #666;
                /* for modern browsers use semi-transparent color on the border. nice! */
                border: 10px solid rgba(82, 82, 82, 0.698);
                /* hot CSS3 features for mozilla and webkit-based browsers (rounded borders) */
                -moz-border-radius: 8px;
                -webkit-border-radius: 8px;
            } #facebox div {
                padding: 10px;
                border: 1px solid #3B5998;
                background-color: #fff;
                font-family: "lucida grande", tahoma, verdana, arial, sans-serif
            } #facebox h2 {
                margin: -11px;
                margin-bottom: 0px;
                color: #fff;
                background-color: #6D84B4;
                padding: 5px 10px;
                border: 1px solid #3B5998;
                font-size: 20px;
            }
			.close{
				display:none;
			}
        </style>
        <style type="text/css">
        </style>
        <script type="text/javascript">
        </script>
    </head>
    <body>
        <button id="open_now">
            Open Again
        </button>
        <!-- facebook dialog -->
        <div id="facebox">
            <div>
            	<p>正在努力加载,请稍候...</p>
                <!-- yes/no buttons -->
                <p>
                    <button class="close">
                        Close 
                    </button>
                </p>
            </div>
        </div>
        <script type="text/javascript">
        	$(function(){
				
			});
            $(document).ready(function(){
                $("#open_now").click(function(){
                    $("#facebox").overlay().load();
                });
                // select the overlay element - and "make it an overlay"
                $("#facebox").overlay({
                    // custom top position
                    top: 260,
                    // some mask tweaks suitable for facebox-looking dialogs
                    mask: {
                        // you might also consider a "transparent" color for the mask
                        color: '#fff',
                        // load mask a little faster
                        loadSpeed: 200,
                        // very transparent
                        opacity: 0.5
                    },
                    // disable this for modal dialog-type of overlays
                    closeOnClick: true,
                    // load it immediately after the construction
                    load: false
                });
            });
        </script>
    </body>
</html>
